<template>
	<view class="container container24934">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
			<u-form-item class="diygw-col-24" label="领养条件" labelPosition="top" prop="checkbox">
				<u-checkbox-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass="justify-between"
					activeColor="#f37b1d" v-model="checkbox" @change="changeCheckbox">
					<div class="checkbox-row" v-for="(checkboxitem, checkboxindex) in checkboxDatas"
						:key="checkboxindex">
						<u-checkbox :name="checkboxitem.value">
							{{ checkboxitem.label }}
						</u-checkbox>
					</div>
				</u-checkbox-group>
			</u-form-item>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="所在地址" prop="input">
					<u-input :focus="inputFocus" class="" placeholder="输入详细地址" v-model="input" type="text"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="联系人姓名" prop="input1">
					<u-input :focus="input1Focus" class="" placeholder="输入您的姓名" v-model="input1" type="text"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="手机号" prop="input2">
					<u-input :focus="input2Focus" class="" placeholder="输入手机号" v-model="input2" type="text"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="微信号" prop="input3">
					<u-input :focus="input3Focus" class="" placeholder="输入微信号" v-model="input3" type="text"></u-input>
				</u-form-item>
			</view>
		</view>
		<view class="flex diygw-col-24 flex-nowrap flex6-clz">
			<view class="flex flex-wrap diygw-col-9 flex-direction-column flex7-clz">
				<view class="flex diygw-col-24">
					<button
						class="diygw-btn diygw-line-orange radius-xl flex-sub margin-xs button-button-clz" @click="back()">上一步</button>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-15 flex-direction-column flex8-clz">
				<view class="flex diygw-col-24">
					<button class="diygw-btn orange radius-xl flex-sub margin-xs button1-button-clz" @click="send()">发布</button>
				</view>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				checkboxDatas: [{
						value: '1',
						label: '仅限同城'
					},
					{
						value: '2',
						label: '按时打疫苗'
					},
					{
						value: '3',
						label: '适龄绝育'
					},
					{
						value: '4',
						label: '遛狗拴绳，养猫封网'
					},
					{
						value: '5',
						label: '科学养宠，办理狗证'
					},
					{
						value: '6',
						label: '打卡反馈'
					},
					{
						value: '7',
						label: '签领养协议'
					},
					{
						value: '8',
						label: '全家同意'
					},
					{
						value: '9',
						label: '有稳定收入'
					},
					{
						value: '10',
						label: '不得遗弃，转让，贩卖，繁殖，虐待'
					}
				],
				checkbox: [],
				inputFocus: false,
				input: '',
				input1Focus: false,
				input1: '',
				input2Focus: false,
				input2: '',
				input3Focus: false,
				input3: '',
				basicData:{}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}
			if(option.data){
				const jsonData = JSON.parse(decodeURIComponent(option.data));
				this.basicData = jsonData
				console.log(jsonData)
			}

			this.init();
		},
		methods: {
			async init() {},
			changeCheckbox(evt) {},
			back(){
				uni.navigateBack()
			},
			async send(){
				const checkbox = JSON.parse(JSON.stringify(this.checkbox))
				const address = this.input
				const username = this.input1
				const phone = this.input2
				const vx = this.input3
				this.basicData['adoptCondition'] =checkbox.join(",")
				
				const detailsData = {
					"address":address,
					"name":username,
					"phone":phone,
					"vx":vx
				}
				const data = {
				  pet: { ...this.basicData },
				  publisher: { ...detailsData }
				};
				const final_data = JSON.stringify(data)
				const token = uni.getStorageSync('token')
				const header={
					'content-type': 'application/json;charset=UTF-8',
					"Token":token
				}
				const http_url = "/publisherPet/saveDetail"
				console.log(final_data)
				const result = await this.$http.post(http_url,final_data,header)
				const code = result.code
				if(code==200){
					uni.switchTab({
						url:'/pages/index'
					})
					uni.showToast({
						title: '发布成功',
						icon: 'success',
						duration: 2000
					});
				}else{
					uni.showToast({
						title: '发布失败',
						icon: 'error',
						duration: 2000
					});
				}
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		margin-left: 0rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 0rpx - 0rpx) !important;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
	}

	.checkbox-row {
		width: 50%;
		/* 每行两个复选框，所以宽度为50% */
		box-sizing: border-box;
		/* 计算宽度时包含边框和内边距 */
		padding: 5px;
		/* 可根据需要调整复选框之间的间距 */
	}

	.flex1-clz {
		margin-left: 0rpx;
		padding-top: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		padding-left: 10rpx;
		width: calc(100% - 0rpx - 0rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
		padding-right: 10rpx;
	}

	.flex6-clz {
		margin-left: 0rpx;
		padding-top: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		padding-left: 10rpx;
		width: calc(100% - 0rpx - 0rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 0rpx;
		padding-right: 10rpx;
	}

	.flex7-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}

	.button-button-clz {
		margin: 3px !important;
	}

	.flex8-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}

	.button1-button-clz {
		margin: 3px !important;
	}

	.container24934 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container24934 {}
</style>